<template>
	<div>
		<el-dialog v-model="formVisible" :title="formTitle" width="80%" destroy-on-close :fullscreen='false'>
			<el-form class="formModel_form" ref="formRef" :model="form" label-width="$template2.back.add.form.base.labelWidth" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="标题" prop="title">
							<el-input class="list_inp" v-model="form.title" placeholder="标题"
								type="text" :readonly="!isAdd||disabledForm.title?true:false" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发布时间" prop="fabushijian">
							<el-date-picker
								class="list_inp"
								v-model="form.fabushijian"
								type="datetime"
								placeholder="选择发布时间"
								:disabled="!isAdd||disabledForm.fabushijian?true:false"
								value-format="YYYY-MM-DD HH:mm:ss">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="内容" prop="content">
							<el-input
								class="list_inp"
								type="textarea"
								:rows="4"
								placeholder="请输入内容"
								v-model="form.content"
								:readonly="!isAdd||disabledForm.content?true:false">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer v-if="isAdd||type=='logistics'||type=='reply'">
				<span class="formModel_btn_box">
					<el-button class="formModel_cancel" @click="closeClick">取消</el-button>
					<el-button class="formModel_confirm" type="primary" @click="save"
						>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		computed,
		defineEmits
	} from 'vue'
	const context = getCurrentInstance()?.appContext.config.globalProperties;	
	const emit = defineEmits(['formModelChange'])
	//基础信息
	const tableName = 'gonggao'
	const formName = '公告'
	//基础信息
	//form表单
	const form = ref({})
	const disabledForm = ref({
		title: false,
		fabushijian: false,
		content: false
	})
	const formVisible = ref(false)
	const isAdd = ref(false)
	const formTitle = ref('')
	//表单验证
	const rules = ref({
		title: [
			{required: true,message: '请输入标题',trigger: 'blur'}, 
		],
		fabushijian: [
			{required: true,message: '请选择发布时间',trigger: 'change'}, 
		],
		content: [
			{required: true,message: '请输入内容',trigger: 'blur'}, 
		]
	})
	//表单验证
	
	const formRef = ref(null)
	const id = ref(0)
	const type = ref('')
	//methods

	//获取唯一标识
	const getUUID =()=> {
      return new Date().getTime();
    }
	//重置
	const resetForm = () => {
		form.value = {
			title: '',
			fabushijian: '',
			content: ''
		}
	}
	//获取info
	const getInfo = ()=>{
		context?.$http({
			url: `${tableName}/info/${id.value}`,
			method: 'get'
		}).then(res => {
			form.value = res.data.data
			formVisible.value = true
		})
	}
	//初始化
	const init=(formId=null,formType='add',formNames='',row=null,table=null,statusColumnName=null,tips=null,statusColumnValue=null)=>{
		resetForm()
		if(formId){
			id.value = formId
			type.value = formType
		}
		if(formType == 'add'){
			isAdd.value = true
			formTitle.value = '新增' + formName
			formVisible.value = true
		}else if(formType == 'info'){
			isAdd.value = false
			formTitle.value = '查看' + formName
			getInfo()
		}else if(formType == 'edit'){
			isAdd.value = true
			formTitle.value = '修改' + formName
			getInfo()
		}
	}
	//关闭
	const closeClick = () => {
		formVisible.value = false
	}
	//保存
	const save = () => {
    form.value.faburen = 'admin'
		formRef.value.validate((valid) => {
			if (valid) {
				context?.$http({
					url: `${tableName}/${!id.value ? 'save' : 'update'}`,
					method: 'post',
					data: form.value
				}).then(res => {
					if (res.data.code === 0) {
						context?.$toolUtil.message('操作成功', 'success', () => {
							formVisible.value = false
							emit('formModelChange')
						})
					} else {
						context?.$toolUtil.message(res.data.msg, 'error')
					}
				})
			}
		})
	}
	//暴露方法
	defineExpose({
		init
	})
</script>
<style lang="scss" scoped>
.formModel_form {
	.formModel_btn_box {
		display: flex;
		justify-content: center;
		align-items: center;
		.formModel_cancel {
			margin-right: 10px;
		}
	}
}
</style> 